import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入组件
//import Home from "../views/Home";
// import Home2 from "../views/Home2";
// import About from "../views/About";
import Home from "../pages/Home"
import About from "../pages/About"
import News from "../pages/News"
import Message from "../pages/Message"
import Detail from "../pages/Detail";

Vue.use(Router)

//创建并暴露一个路由器
export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: About
    },
    // {
    //   path: '/home2',
    //   name: 'Home2',
    //   component: Home2
    // },

    {
      path: '/home',
      name: 'Home',
      component: Home,
      children:[
        {
          path: 'news',
          name: 'news',
          component: News
        },
        {
          path: 'message',
          name: 'message',
          component: Message,
          children:[
            {
              path: 'detail/:id/:title', //使用占位符声明接收params参数
              //path: 'detail',
              //name配置项为路由命名
              //name: 'detail',
              name: 'xiangqing',
              component: Detail,
              //props的第一种写法，值为对象，该对象中所有的key-value都会以props的形式传给Detail组件。
              //{props:{a:1,b:'hello'}}

              //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
              //props: true

              //props的第三种写法：值为函数
              props($route) {
                return {
                  // id: $route.params.id,
                  // title: $route.params.title,
                  id: $route.query.id,
                  title: $route.query.title,
                }
              }
            }
          ]
        },
      ]
    }
  ]
})
